const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')

module.exports = {
    entry: './src/main.js',
    output: {
        filename: "bundle.js",
        path: path.join(__dirname, 'dist')
    },
    optimization: {
        minimizer: [ //压缩类的插件
            new TerserWebpackPlugin() //开启OptimizeCssAssetsWebpackPlugin后，js文件无法打包，必须添加此插件
            ,new OptimizeCssAssetsWebpackPlugin() //压缩单独提取的css
        ]
    //     usedExports: true, //标记 开启tree shaking，生产环境默认开启
    //     minimize: true, //清除

    //     sideEffects: true // 没有用到的模块不会打包 生产环境默认开启
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: "vue-loader"
            }
            ,{ //处理样式代码
                test: /\.(less|css)$/,
                //将 css-loader、style-loader 和 less-loader 链式调用，可以把所有样式立即应用于 DOM。
                use: [
                    // "style-loader",
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "less-loader"
                ]
            }
            ,{ //处理图片
                test: /\.(png|jpg|gif)$/,
                use: {
                    // "file-loader", //大文件单独提取存放，提高加载速度
                    //url-loader 小文件使用Data URLs，减少请求次数
                    loader: 'url-loader',
                    options: {
                        esModule: false, //默认为true,图片打包出来路径错误：object Module
                        limit: 10*1024 //10kb
                    }
                }
            }            
            // ,{
            //     test: /\.html$/,
            //     loader: 'html-loader',
            //     options: {
            //         attributes: {
            //             list: [
            //                 {
            //                     tag: 'img',
            //                     attribute: 'src',
            //                     type: 'src'
            //                 }
            //             ]
            //         }
            //     }
            // }
        ]
    },
    plugins: [
        new VueLoaderPlugin()

        ,new HtmlWebpackPlugin({
            title: 'webpack', //页面标题
            meta: { //页面meta标签
                viewport: 'width-device-width'
            },
            template: './public/index.html' //配置页面模板
        }) //生成一个HTML5文件

        ,new MiniCssExtractPlugin() //压缩提取的css

        ,new webpack.DefinePlugin({ //注入全局成员
            API_BASE_URL: '"https://api.example.com"',
            BASE_URL: '"/"'
        })
    ]
}